#{extends 'noTab.html' /}
#{set title:'Edit action item' /}

<script type="text/javascript" src="@{'/public/javascripts/jquery.validate.js'}"></script> 
	<script type="text/javascript" src="@{'/public/javascripts/jquery.validate.min.js'}"></script> 
	<script type="text/javascript" src="@{'/public/javascripts/validation.js'}"></script> 
		<script type="text/javascript">
	 function backR() {
		if(confirm("If you press ok all your modifications(if any)will not be saved ,press cancel to stay!!")){
		window.location = 'http://localhost:9000/application/showplan?planId='+${item.plan.id};
		}
	  } 
	</script>

<h1 class="viewTitle">Edit action item</h1>
<div class="viewContent">
	<div id="actionItemWrapper">
		#{if item != null}
				<form action="@{Application.editActionItem(item.id)}" method="POST" id="editActionItemForm">
			
				<div class="formEntry"> 
					<div class="formLabel"> 
						<label for="itemDescription">New description (10 characters at least)</label> 
					</div> 
					<textarea rows="5" cols="40" name="newDescription" id="newDescription" required = true/>${item.description}</textarea>
					<div class="clear"></div> 
				</div>
				<div class="formEntry"> 
					<div class="formLabel"> 
						<label for="stDate">Choose the new start date</label> 
					</div> 
					<input class="stDate" type="text" name="newStartDate" id="newStartDate" #{if item.startDate != 0} value="${item.formatStartDate()}"#{/if} required = true> </input>
					<script type="text/javascript" charset="utf-8">$(".stDate").datepicker({dateFormat:'yy-mm-dd', showAnim:'fadeIn'})</script>
					<div class="clear"></div>
				</div>
				<div class="formEntry"> 
					<div class="formLabel"> 
						<label for="endDate">Choose the new end date</label> 
					</div> 
					<input class = "endDate" type="text" name="newEndDate" id="newEndDate" #{if item.endDate != 0} value="${item.formatEndDate()}"#{/if} required = true></input>
					<script type="text/javascript" charset="utf-8"> $(".endDate").datepicker({dateFormat:'yy-mm-dd', showAnim:'fadeIn'})</script> 
					<div class="clear"></div>
				</div>
				
				 <div id="formButtons">
	    <input type="submit" id="apply changes" name="sapply changes" value="apply changes" />
	    <input type="button" name="Leave this page" value="Leave this page" onclick="backR();"/>
	  </div>
				
			</form>
		#{/if} #{else}
		
			<div class="error"><p class="error">The requested action item is not available</p></div>
			
		#{/else}
	
	</div>
</div>